<template>
    <div class="starter-template">
      <h1>Vuex 示例</h1>
      <display></display>
      <increment></increment>
      <div class="">
          -----
      </div>
      <decrease></decrease>
      <input type="text" name="name" :value.sync="step" @input="updateStep">
    </div>
</template>
<style scoped>

</style>
<script>
import Display from './display.vue'
import Increment from './increment.vue'
import Decrease from './decrease.vue'
import store from '../vuex/store'
import vuex from 'vuex'
import { updateStep } from '../vuex/actions'

export default {
    data: function(){
        return {
            step: 1
        }
    },
    components: {
      'display':Display,
      'increment':Increment,
      'decrease':Decrease
    },
    methods: {
        updateStep: function(e){
            this.updateSteps(parseInt(e.target.value))
        }
    },
    vuex: {
        getters: {
            step: function(state){
                return state.step;
            }
        },
        actions: {
            updateSteps: updateStep
        }
    },
    store
}
</script>
